const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //自动清空打包目录
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
  // profile: true,
  // cache: {
  //   type: "filesystem",
  //   maxAge:5184000000,
  //   profile:true,
  //   cacheDirectory:"node_modules/.cache/webpack"
  // },
  // mode: 'development', // 环境模式
  entry: path.resolve(__dirname, '../../src/main.ts'), // 打包入口
  output: {
    path: path.resolve(__dirname, '../../dist'), // 打包出口
    filename: 'js/[name][chunkhash:8].js', // 打包完的静态资源文件名
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '../../src'),
    },
    // 支持那些扩展名不用写
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.vue', '.json'],
  },
  module: {
    // loader
    rules: [
      {
        test: /\.vue$/,
        use: ['vue-loader'],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
        //use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.tsx?$/, //ts 或者tsx
        exclude: /node_modules/, // 不包含那些模块
        use: [
          'babel-loader',
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true, // 关闭项目运行时的类型检查
              appendTsSuffixTo: ['\\.vue$'], // 用于编译. vue文件中的ts
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
        type: 'asset',
        parser: {
          dataUrlcondition: {
            maxSize: 30 * 1024, //4kb
          },
        },
        // generator: { filename: 'img/[contenthash:8][ext][query]' },
      },
    ],
  },
  plugins: [
    // new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      templateContent: `<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Admin Webpack</title>
</head>
<body>
    <div id="app" />
</body>
</html>`,
    }),
  ],
  devServer: {
    port: 8080, // 端口
    historyApiFallback: true, // 支持history 模式
    static: {
      directory: path.join(__dirname, 'public'),
    },
  },
};
